<template>
  <!-- 气象监测 -->
  <BaseMainSlot>
    <template v-slot:content>
      <div class="material-box">
        <div class="choose-material">
          <div class="choose-material-title">选择气象站</div>
          <treeSide @treeselectvalue="treeselectvalue" />
        </div>
        <!-- <div class="material-box-other">
          <div class="material-box-other-title">气象局数据监测</div>
          <div class="material-box-other-date">{{ othercollectDatetime }}</div>
          <div class="material-box-other-list">
            <div
              v-for="(otherweatheritem, otherweatherindex) in otherweatherdata"
              :key="otherweatherindex"
              class="material-box-other-list-item"
            >
              <div class="material-box-other-list-item-title">{{ otherweatheritem.dataItemName }}</div>
              <div
                class="material-box-other-list-item-message"
              >{{ otherweatheritem.firstValue }}{{ otherweatheritem.symbol }}</div>
            </div>
          </div>
        </div> -->
        <div class="material-box-left">
          <div class="material-box-left-view">
            <div class="material-box-left-view-rightcontent">
              <div class="material-box-left-view-rightcontent-top">
                <div class="box-left-lineone">
                  <div class="arrows"
                    :style="{ transform: `rotate(${weatherquanquan.fenxiang ? weatherquanquan.fenxiang : 0}deg)` }">
                    <div class="arrowsIcon"></div>
                  </div>
                  <div class="wind-direction">
                    <div class="wind-direction-one">风向</div>
                    <div class="wind-direction-two">
                      {{ weatherquanquan.fenxiang
                      }}{{ weatherquanquan.fenxiangsymbol }}
                    </div>
                    <div class="wind-direction-one">风速</div>
                    <div class="wind-direction-two">
                      {{ weatherquanquan.fensu }}{{ weatherquanquan.fensusymbol }}
                    </div>
                  </div>
                </div>
                <div class="box-left-linetwo">
                  <template v-for="(item, index) in weatherdataleftTop">
                    <div class="left-linetwo-item" v-if="item.dataType && item.dataCollectNew" :key="index">
                      <img class="image-line" :src="getimageurl(item.dataTypeId,item.dataType.dataTypeName)" />
                      <div class="mesge-line">
                        <div>{{ item.dataType.dataTypeName }}</div>
                        <div
                          v-if="(item.dataType.dataTypeName !== '雨雪状态') && (item.dataType.dataTypeName !== '雨雪') && item.dataCollectNew">
                          {{ item.dataCollectNew.firstValue }}{{ item.zhsymbol }}</div>
                        <div
                          v-if="(item.dataType.dataTypeName === '雨雪状态') || (item.dataType.dataTypeName === '雨雪') && item.dataCollectNew">
                          {{ item.dataCollectNew.firstValue === 0 ? "正常" : "有雨雪" }}</div>
                        <div>{{ $moment(item.collectDatetime).format("YYYY-MM-DD hh:mm") }}</div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <div class="box-left-linethree">
                <div class="chance-type">
                  <div v-for="(item, index) in weatherdataleft" :key="index" class="chance-type-item"
                    :class="{ 'chance-type-item-select': nowselectweathertypeindex === index }"
                    @click="getzhexiandataleft(item.dataItemId, index, item.symbol)">{{ item.dataType.dataTypeName }}
                  </div>
                </div>
                <div class="export-box">
                  <div class="datePicker">
                    <div class="felx searchItem">
                      <div>选择时间颗粒：</div>
                      <el-select filterable clearable v-model="interval" placeholder="请选择">
                        <el-option label="全部" :value="1" />
                        <el-option label="5分钟" :value="5" />
                        <el-option label="10分钟" :value="10" />
                        <el-option label="30分钟" :value="30" />
                        <el-option label="60分钟" :value="60" />
                      </el-select>
                    </div>
                    <div class="felx searchItem">
                      <div>选择时间间隔：</div>
                      <el-date-picker v-model="timeList" type="datetimerange" :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" align="right">
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="export">
                    <div style="margin-left: 15px;">
                      <el-button type="primary" icon="el-icon-search"
                        @click="getzhexiandataleft(weatherDataItemId, nowselectweathertypeindex, weatherdataleft[nowselectweathertypeindex].symbol)">查询</el-button>
                    </div>
                    <div style="margin-left: 15px;">
                      <el-button type="primary" icon="el-icon-download" @click="queryHistoryExport">导出数据</el-button>
                    </div>
                  </div>
                </div>
                <div v-if="zhexiantulistone.xAxisdata.length > 0" ref="nowzheachrtid" class="nowzheachrt">
                  <weatherChart :nowwidth="'100%'" :nowheight="nowechartsheight" :cdata="zhexiantulistone"
                    :bottom="'20'" />
                </div>
                <div v-else class="nowzheachrt nowzheachrt-ds">
                  <h2>暂无数据</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>
<script>
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import treeSide from "./components/trelist.vue"
import weatherChart from "@/components/Echarts/components/linechart/weatherChart.vue";
import MeteorologicalMonitoringApi from "@/api/iot-monitoring/meteorological-monitoring";
import { mymixin } from "@/utils/mixin";
import { timestampToTime } from "@/utils/validate";
import * as echarts from "echarts";

export default {
  name: "MeteorologicalMonitoring",
  components: { BaseMainSlot, weatherChart, treeSide },
  mixins: [mymixin],
  data () {
    return {
      interval: 1,
      timeList: [timestampToTime(new Date(), 1), timestampToTime(new Date())],
      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      weatherdatalefttwo: [],
      // 左侧选择某数据
      nowselectweathertypeindex: 0,
      weatherDataItemId: '',
      // 左侧折线图数据
      zhexiantulistone: {
        xAxisdata: [],
        xData: [],
        seriesData: [],
        unitName: "",
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 65,
            end: 85
          },
          {
            type: 'inside',
            realtime: true,
            start: 65,
            end: 85
          }
        ],
      },
      nowechartsheight: "100%",
      // 左侧气象数据项
      weatherdataleft: [],
      weatherdataleftTop: [],
      // 圈圈里面的风向和风速
      weatherquanquan: {
        fenxiang: "--",
        fenxiangsymbol: "°",
        fensu: "--",
        fensusymbol: "km/h"
      },
      // 外部气象站数据
      otherweatherdata: [],
      othercollectDatetime: "",
    };
  },
  created () { },
  mounted () {
    this.$nextTick(() => {
      this.geteacharts();
    });
  },
  methods: {
    queryHistoryExport () {
      let params = {
        interval: this.interval,
        dataItemId: this.weatherDataItemId,
        endTime: this.timeList[1],
        startTime: this.timeList[0]
      };
      MeteorologicalMonitoringApi.queryHistoryExport(params).then(res => {
        this.getFileNameAndDownload(res)
      })
    },
    // 点击树状触发方法
    treeselectvalue (e) {
      // this.getotherweatherdatalefttwo(e)
      this.getweatherdataleftTwo(e)
    },
    // 获取左侧气象数据列表
    async getotherweatherdatalefttwo (e) {
      let res = await MeteorologicalMonitoringApi.queryNewByEquipmentId({ equipmentId: e });
      if (res.data && res.data.length > 0) {
        let zhlist = res.data;
        let newlist = [];
        zhlist.forEach((item, index) => {
          if (
            item.dataTypeName === "天气现象" ||
            item.dataTypeName === "风向描述"
          ) {
            let enumListTypelist = this.handenumListmet(item.enumListType);
            item.lastValue1 = enumListTypelist[item.lastValue1].name;
            item.symbol = "";
            newlist.push({ ...item });
          } else {
            newlist.push({ ...item });
          }
        });
        this.otherweatherdata = newlist;
        if (newlist.length[0]) {
          this.othercollectDatetime = this.$moment(newlist.length[0].collectDatetime).format("YYYY-MM-DD");
        }
      } else {
        this.otherweatherdata = []
      }
    },
    // 字符串处理方法
    handenumListmet (str) {
      let controlslist = [];
      var arr = str.split(";");
      for (var i = 0; i < arr.length; i++) {
        let diy = arr[i].split(":");
        controlslist.push({
          name: diy[1],
          value: diy[0]
        });
      }
      return controlslist;
    },
    // 动态获取echarts高度
    geteacharts () {
      if (this.zhexiantulistone.xAxisdata.length > 0) {
        let parentone = this.$refs.nowzheachrtid;
        let heightone = parentone.scrollHeight;
        this.nowechartsheight = heightone - 35 + "px";
      }
    },
    async getweatherdataleftTwo (e) {
      let res = await MeteorologicalMonitoringApi.queryNewByEquipmentId({ equipmentId: e });
      if (res.data) {
        let zhlist = res.data;
        // console.log(zhlist);
        let newlist = [];
        zhlist.forEach((item, index) => {
          if (item.dataType && item.dataCollectNew) {
            if (item.dataType.dataTypeName === "风向") {
              this.weatherquanquan.fenxiang = item.dataCollectNew.firstValue ? item.dataCollectNew.firstValue : '--';
              this.$set(item, "symbol", "°");
            }
            if (item.dataType.dataTypeName === "风速") {
              this.weatherquanquan.fensu = item.dataCollectNew.firstValue ? item.dataCollectNew.firstValue : '--';
              this.weatherquanquan.fensusymbol = item.symbol ? item.symbol : 'km/h';
            }
          }
          if (index === 0) {
            newlist.push({
              ...item,
              zhsymbol: item.symbol
            });
          } else {
            newlist.push({
              ...item,
              zhsymbol: item.symbol
            });
          }
        });
        let newlist1 = newlist.filter(item => item.dataType && item.dataType.dataTypeName !== "风向");
        let newlist2 = newlist1.filter(item => item.dataType && item.dataType.dataTypeName !== "雨雪状态");
        this.weatherdataleft = newlist2;
        this.weatherdataleftTop = newlist;
        this.weatherDataItemId = this.weatherdataleft[0]?.dataItemId
        this.getzhexiandataleft(this.weatherdataleft[0]?.dataItemId, 0, this.weatherdataleft[0]?.symbol);
      } else {
        this.weatherdataleft = []
        this.weatherdataleftTop = []
        this.weatherquanquan.fenxiang = '--'
        this.weatherquanquan.fensu = '--'
        this.zhexiantulistone = {
          xAxisdata: [],
          xData: [],
          seriesData: [],
          unitName: ""
        }
      }
    },
    // 获取左侧折线图
    getzhexiandataleft (id, i, x) {
      // 用于样式切换
      this.nowselectweathertypeindex = i;
      this.weatherDataItemId = id;
      let date = this.dateToFormattwo(new Date());
      let params = {
        interval: this.interval,
        dataItemId: this.weatherDataItemId,
        startTime: this.timeList ? this.timeList[0] : timestampToTime(new Date(), 1),
        endTime: this.timeList ? this.timeList[1] : timestampToTime(new Date())
      };
      MeteorologicalMonitoringApi.queryHistoryByListAndInterval(params).then(res => {
        this.handingzhexiangone(res.data.reverse(), x);
      });
    },
    // 折线图数据处理
    handingzhexiangone (list, x) {
      // console.log(list)
      if (list === undefined || list.length === 0) {
        return;
      }
      let seriesDataName = this.weatherdataleft[this.nowselectweathertypeindex]["dataTypeName"]
      seriesDataName = seriesDataName ? seriesDataName : ''
      let xAxisdata = [];
      let xData = [
        seriesDataName
      ];
      let seriesData = [
        {
          name: seriesDataName,
          type: "line",
          data: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: "#04FA99" },
                { offset: 1, color: "#3EACE5" }
              ])
            }
          }
        }
      ];
      list.forEach(item => {
        seriesData[0]["data"].push(item.value);
        let ggdate = this.dateToFormat(item.collectDatetime);
        xAxisdata.push(ggdate);
      });
      this.zhexiantulistone = {
        xAxisdata: xAxisdata,
        xData: xData,
        seriesData: seriesData,
        unitName: x
      };
    },
    // 根据数据类型显示对应的图片地址
    getimageurl (id,name='') {
      console.log(name.indexOf('雨雪')!==-1)
      let url = "";
      switch(true){
        case name.indexOf('雨雪')!==-1:
          url = require("@/assets/weather-station/yuxuezhuangtai.png");
          break;
        case name.indexOf('温度')!==-1:
        url = require("@/assets/weather-station/kongqiwendu.png");
          break;
        case name.indexOf('湿度')!==-1:
        url = require("@/assets/weather-station/kongqishidu.png");
          break;
        case name.indexOf('风向')!==-1:
        url = require("@/assets/weather-station/wind-direction.png");
          break;
        case name.indexOf('风速')!==-1:
        url = require("@/assets/weather-station/wind-speed.png");
          break;
        case name.indexOf('光辐射')!==-1:
        url = require("@/assets/weather-station/guangfushe.png");
          break;
        case name.indexOf('风力')!==-1:
        url = require("@/assets/weather-station/wind-power.png");
          break;
        default:
          url = require("@/assets/weather-station/kongqishidu.png");
          break;
      }
      // switch (id) {
      //   case 23||name.indexOf('雨雪')!==-1:
      //     url = require("@/assets/weather-station/yuxuezhuangtai.png");
      //     break;
      //   case 24:
      //     url = require("@/assets/weather-station/wind-speed.png");
      //     break;
      //   case 25:
      //     url = require("@/assets/weather-station/wind-power.png");
      //     break;
      //   case 26:
      //     url = require("@/assets/weather-station/wind-direction.png");
      //     break;
      //   case 27:
      //     url = require("@/assets/weather-station/guangfushe.png");
      //     break;
      //   case 13:
      //     url = require("@/assets/weather-station/kongqishidu.png");
      //     break;
      //   case 12:
      //     url = require("@/assets/weather-station/kongqiwendu.png");
      //     break;
      //   case 63:
      //     url = require("@/assets/weather-station/pm10.png");
      //     break;
      //   case 62:
      //     url = require("@/assets/weather-station/pm2.5.png");
      //     break;
      //   case 14:
      //     url = require("@/assets/weather-station/guangzhaodu.png");
      //     break;
      //   case 61:
      //     url = require("@/assets/weather-station/zaoyinzhi.png");
      //     break;
      //   case 59:
      //     url = require("@/assets/weather-station/yuliangzhi.png");
      //     break;
      //   case 58:
      //     url = require("@/assets/weather-station/daqiyaqiang.png");
      //     break;
      //   case 25:
      //     url = require("@/assets/weather-station/kongqishidu.png");
      //     break;
      //   case 17:
      //     url = require("@/assets/weather-station/kongqiwendu.png");
      //     break;
      //   case 137:
      //     url = require("@/assets/weather-station/yuxuezhuangtai.png");
      //     break;
      //   default:
      //     url = require("@/assets/weather-station/kongqishidu.png");
      //     break;
      // }
      return url;
    },
    // 自动旋转角度方法
    testrorat () {
      let style = document.createElement("style");
      style.setAttribute("type", "text/css");
      document.head.appendChild(style);
      let sheet = style.sheet;
      let index = 0;
      let point = 20;
      // 根据每一个时钟的数据为页面添加不同的keyframes 0 为index
      sheet.insertRule(
        `@keyframes pointermove` +
        (index + 1) +
        `{
  			from {
			    transform: rotate(300deg);
  			}
 			 to {
   				 transform: rotate(` +
        (300 + point) +
        `deg);}
			}`,
        0
      );
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .zhcontent {
  overflow-y: initial !important;
}

.felx {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.searchItem {
  margin-right: 10px;
  color: #397DC1;
}

.export-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px;

  .export {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }
}

.material-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.material-box-left {
  width: calc(100% - 260px);
  height: 100%;
  padding: 0 5px;
  overflow: auto;

  .material-box-left-title {
    width: 240px;
    text-align: center;
    height: 36px;
    line-height: 36px;
    color: rgba(5, 235, 219, 1);
    letter-spacing: 8px;
    font-size: 24px;
    // background-image: url('~@/assets/weather-station/weatherbackground.png');
    background-repeat: no-repeat;
    background-size: 240px 36px;
    margin: -20px auto 15px;
  }

  .material-box-left-view {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    .material-box-left-view-leftimg {
      width: 200px;
      height: 100%;
      // background-image: url('~@/assets/weather-station/leftviewleftimg.png');
      background-repeat: no-repeat;
      background-size: 200px 100%;
    }

    .material-box-left-view-rightcontent {
      width: 100%;
      height: 100%;
      overflow: auto;

      .material-box-left-view-rightcontent-top {
        width: 100%;
        height: 370px;
        padding: 20px 10px 10px;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        background-color: #D6ECFF;
        box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);

        .box-left-lineone {
          width: 330px;
          height: 330px;
          margin-left: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          .arrows {
            position: absolute;
            // background: #397DC1;
            width: 30px;
            height: 300px;
            top: calc(50% - 150px);
            left: calc(50% - 15px);
            transform: rotate(0deg);

            .arrowsIcon {
              height: 50px;
              width: 30px;
              background-image: url("~@/assets/weather-station/arrow.png");
              background-position: center center;
              background-size: 100% 100%;
            }
          }

          .wind-direction {
            width: 310px;
            height: 330px;
            // background-color: #023d5a;
            background-image: url("~@/assets/weather-station/qiuqiu.png");
            background-size: 310px;
            background-repeat: no-repeat;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            line-height: 30px;

            .wind-direction-two {
              width: 120px;
              height: 30px;
              line-height: 30px;
              background-color: #00000065;
              text-align: center;
              border-radius: 20px;
              border: #a8c1e6 1px solid;
              white-space: nowrap;
            }
          }
        }

        .box-left-linetwo {
          width: calc(100% - 350px);
          height: 345px;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 0 23px;
          overflow: auto;

          .left-linetwo-item {
            width: 48%;
            height: 100px;
            background-color: #fff;
            box-shadow: 0px 3px 6px 1px rgba(0, 48, 113, 0.16);
            border-radius: 5px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .image-line {
              height: 70px;
              width: 70px;
            }

            .mesge-line {
              text-align: center;
              white-space: nowrap;
              line-height: 20px;
              font-weight: 700;
            }
          }
        }
      }

      .box-left-linethree {
        width: 100%;
        margin-top: 10px;
        overflow: hidden;
        background-color: #D6ECFF;
        box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);

        .chance-type {
          height: 40px;
          margin-bottom: 20px;
          padding-top: 5px;
          padding-bottom: 5px;
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          overflow: hidden;

          .chance-type-item {
            margin-right: 5px;
            min-width: 120px;
            height: 32px;
            text-align: center;
            white-space: nowrap;
            border: 1px solid #397DC1;
            border-radius: 3px;
            color: #397DC1;
            border-color: #71bdd5;
            cursor: pointer;
            line-height: 24px;
            padding: 2px 25px;
          }

          .chance-type-item-select {
            color: #fff;
            background-color: #397DC1;
            cursor: pointer;
            line-height: 24px;
            padding: 2px 25px;
          }
        }

        .datePicker {
          display: flex;
          justify-content: flex-start;
          color: #fff;

          ::v-deep .el-range-input {
            color: #397DC1;
          }

          ::v-deep .el-range-separator {
            color: #397DC1;
          }
        }

        .nowzheachrt {
          width: calc(100% - 10px);
          padding: 0 18px;
          height: 240px;
          box-sizing: border-box;
          // background-color: chartreuse;
        }

        .nowzheachrt-ds {
          display: flex;
          justify-content: center;
          align-items: center;

          h2 {
            font-size: 27px;
            letter-spacing: 4px;
          }
        }
      }
    }
  }
}

.choose-material {
  width: 240px;
  height: 100%;
  background: #FFFFFF;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);

  .choose-material-title {
    width: 100%;
    height: 50px;
    color: #00365D;
    font-size: 16px;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
  }
}

.material-box-other {
  width: 230px;
  height: 100%;
  background-color: #D6ECFF;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);
  overflow: auto;

  .material-box-other-title {
    width: 100%;
    height: 50px;
    color: #00365D;
    font-size: 16px;
    font-weight: 600;
    line-height: 50px;
    letter-spacing: 1px;
    text-align: center;
  }

  .material-box-other-date {
    width: 221px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
  }

  .material-box-other-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    // overflow-y: scroll;
    .material-box-other-list-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 183px;
      height: 92px;
      color: #fff;
      margin-bottom: 20px;
      background-color: #fff;
      border: 1px solid #397DC1;
      border-radius: 5px;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 111px;
        height: 4px;
        background: #397DC1;
        border-radius: 5px;
      }

      .material-box-other-list-item-title {
        width: 190px;
        line-height: 18px;
        height: 18px;
        letter-spacing: 2px;
        font-size: 16px;
        font-weight: 400;
        color: #43474B;
        line-height: 18px;
        text-align: center;
      }

      .material-box-other-list-item-message {
        width: 190px;
        height: 48px;
        line-height: 48px;
        font-weight: 500;
        color: #397DC1;
        font-size: 20px;
        text-align: center;
      }
    }
  }
}
</style>
